<template>
  <div class="loading_container" v-show="visible">
    <div class="loading_wrapper">
      <div class="aliert">
        {{ aliert }}
        <div class="text">我是标签</div>
        <div class="text">你确定要删除吗？</div>
        <div>
            <button  @click="edit">取消</button>
            <button @click="yes">确定</button>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aliert: "",
      visible: false,
    };
  },
  methods: {
      edit(){
         this.visible=false
      },
      yes(){
          this.visible=false
      }
  },
};
</script>

<style lang="scss">
.loading_container {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.loading_wrapper {
  width: 100%;
  height: 100%;
  text-align: center;
  margin-top: 400px;
  position: relative;
}
.aliert {
  width:90%;
  height: 250px;
  border-radius:20px;
  position: absolute;
  top: 100px;
    text-align: center;
    left:5%;
    top: 5%;
  background:gainsboro;
  
}
.text{
    width: 100%;
    // line-height: 0px;
    margin-top: 20px;
    font-size: 20px;
    display: inline-block;
    font-family: "楷体";
}
</style>